<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

<ul id="ul">
    <li>元素1</li>
    <li>元素2</li>
    <li>元素3</li>
    <li>元素4</li>
    <li>元素5</li>
    <li>元素6</li>
    <li>元素7</li>
    <li>元素8</li>
    <li>元素9</li>
    <li>元素10</li>
    <li>元素11</li>
    <li>元素12</li>
    <li>元素13</li>
    <li>元素14</li>
    <li>元素15</li>
    <li>元素16</li>
    <li>元素17</li>
    <li>元素18</li>
    <li>元素19</li>
    <li>元素20</li>
    <li>元素21</li>
    <li>元素22</li>
    <li>元素23</li>
    <li>元素24</li>
    <li>元素25</li>
    <li>元素26</li>
    <li>元素27</li>
    <li>元素28</li>
    <li>元素29</li>
    <li>元素30</li>
    <li>元素31</li>
    <li>元素32</li>
    <li>元素33</li>
    <li>元素34</li>
    <li>元素35</li>
    <li>元素36</li>
    <li>元素37</li>
    <li>元素38</li>
    <li>元素39</li>
    <li>元素40</li>
    <li>元素41</li>
    <li>元素42</li>
    <li>元素43</li>
    <li>元素44</li>
    <li>元素45</li>
    <li>元素46</li>
    <li>元素47</li>
    <li>元素48</li>
    <li>元素49</li>
    <li>元素50</li>
</ul>

    <script src="../../Utils/utils.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script>
        var setHtml = function(data){
            return "<li>"+data+"</li>";
        }
        var getData = function(p){
            $.ajax({
                url:"./data.json",
                method:"get",
                success:function(res){
                    if(res){
                        var tmp = "";
                        res.forEach(function(v){
                            tmp += setHtml(v.name);
                        });
                        $("#ul").append(tmp);
                    }
                }
            });
        }
        var proxy = (function(){
            var p = 0;
            return function(){
                getData(p);
                return p++;
            };
        })();

        //事件函数
        var scrollHandler = function(){
            //引用了Utils工具类，避免频繁的掉用，这里设置500毫秒延迟
            $(window).scroll(utils.throttle(function () {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                if(Math.ceil(scrollTop + windowHeight) >= scrollHeight){
                    proxy();
                }
            }, 500));
        }

        $(function(){
            scrollHandler();
        });
    </script>
</body>

</html>